<template>
  <textarea
    class="textarea textarea-bordered"
    :cols="cols"
    :rows="rows"
    :value="modelValue"
    @input="onInput"
  ></textarea>
</template>
<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";

interface Props {
  modelValue?: string;
  cols?: number;
  rows?: number;
  debounceMs?: number;
}
const props = withDefaults(defineProps<Props>(), {
  cols: 30,
  rows: 5,
  debounceMs: 300,
});
const emit = defineEmits<{
  "update:modelValue": [value: string];
}>();
const onInput = useDebounceFn((e: Event) => {
  const value = (e.target as HTMLTextAreaElement).value;
  emit("update:modelValue", value);
}, props.debounceMs);
</script>
